<template>
  <div id="searchProList">
    <div class="searchBox">
      <ul>
        <li @click="prev" class="backBt"><span class="iconfont icon-left"></span></li>
        <li class="InSearch">
          <input v-model="searchMsg" type="text">
        </li>
        <li @click="search" class="searchBt">搜索</li>
      </ul>
    </div>
    <div class="screen">
      <ul>
        <li class="active">综合</li>
        <li class="sortPrice">
          <div >价格</div>
          <div class="Arrow">
            <div><span class="iconfont icon-up"></span></div>
            <div><span class="iconfont icon-down"></span></div>
          </div>
        </li>
        <li>销量</li>
      </ul>
    </div>
    <div class="proList">
      <div v-if="searchNone === false"> 没有符合要求的商品 </div>
      <div v-else>
        <div v-for="(item,index) in searchData" class="proDemo">
          <div class="proLeft">
            <img :src="item.imgSrc" alt="">
          </div>
          <div class="proRight">
            <p class="proName">{{ item.name }}</p>
            <p class="proSellNum">销售量: {{ item.sellNum }}件</p>
            <p class="proPrice">${{ item.proPrice }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data: function(){
    return {
      searchNone: '',
      searchMsg: '',
      searchData: [],
    }
  },
  mounted: function() {
    let url = location.href;
    this.searchMsg = url.substr(url.indexOf("?")+1).split("=")[1];
    this.search();
  },
  components: {
    
  },
  methods: {
    search: function() {
      if(this.searchMsg!=''){
        this.searchNone = true;
        this.searchData = [];
        this.axios.get('/web'+'/search',{
          params: {
            keyword: this.searchMsg
          }
        }).then(response=>{
          let data = response.data.data;
          if(data.length!=0){
            let Data = {
              id:'',
              name:'',
              sellNum:'',
              imgSrc: '',
              proPrice: '',
            }
            for(let i=0;i<data.length;i++){
              Data.id = data[i].pro_id;
              Data.name = data[i].pro_name;
              Data.imgSrc = data[i].apic_loc;
              Data.sellNum = data[i].pro_sales;
              Data.proPrice = data[i].pro_bprice;
              
              this.searchData.push(Data);
            }
          }else {
             this.searchNone = false;
          } 
          console.log(data,this.searchData); 
        }).catch(err=>{
          console.log(err)
        })
      }else{
         this.searchNone = false;
      }
    },
    prev: function() {
      this.$router.go(-1)
    }
  },
  computed: {  // 侦听属性
    fullName: function () {
      console.log(this.searchMsg);
    }
  }
}
</script>

<style lang="less">
@fontSize: 20;
.px2rem(@name,@size) {
	@{name}: @size/@fontSize*375/1080*1rem
}
*{
  list-style: none;
  margin: 0;
  padding: 0;
}  
  
#searchProList {
  .px2rem(width,1080);
  
  .searchBox {
    box-sizing: border-box;
    .px2rem(padding-left,40);
    .px2rem(padding-right,40);
    .px2rem(margin-top,135);
    
    ul {
      display: flex;
      justify-content: space-between;
      
      li {
        .px2rem(height,95);
        // .px2rem(line-height,95);
      }
      
      .backBt,.searchBt {
        .px2rem(line-height,95);
        .px2rem(font-size,35);
      }
      
      .backBt {
        span {
          .px2rem(font-size,50);
        }
      }
      
      .InSearch {
        .px2rem(width,830);
        background-color: yellow;
        overflow: hidden;
        border-radius: 6px;
        
        input {
          display: block;
          outline: none;
          border: none;
          width: 100%;
          height: 100%;
          background-color: #eeeeee;
          box-sizing: border-box;
          .px2rem(padding-left,20);
          .px2rem(line-height,95);
          .px2rem(font-size,30);
          color: #999999;
          
        }
      }
    }
  }  

  .screen {
    .px2rem(margin-top,30);
    border-top:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
    
    ul {
      width: 100%;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .px2rem(padding-left,144);
      .px2rem(padding-right,144);
      
      li {
        .px2rem(height,110);
        .px2rem(line-height,110);
        .px2rem(font-size,36);
        font-weight: 700;
      }
      
      .sortPrice {
        display: flex;
        
        .Arrow {
          .px2rem(margin-left,10);
          .px2rem(margin-top,37);
          .px2rem(width,20);
          color: #dddddd;
          
          div {
            .px2rem(line-height,15);

          }
          
          span {
            .px2rem(font-size,20);
          }
        }
      }
      
      .active {
        color: #e94715;
      }
     
    }
  }

  .proList {
    .proDemo {
      .px2rem(padding,25);
      display: flex;
      border-bottom: 1px solid #dddddd;
      
      .proLeft {
        .px2rem(width,255);
        .px2rem(height,255);
        .px2rem(margin-right,45);
        
        img {
          width: 100%;
          height: 100%;
        }
      }
      
      .proRight {
        .px2rem(height,255);
        
        .proName {
          .px2rem(font-size,36);
          .px2rem(margin-bottom,37);
          font-weight: 700;
          
        }
        
        .proSellNum {
          .px2rem(font-size,30);
          .px2rem(margin-bottom,84);
          font-weight: 700;
          color: #7f7f7f;
        }
        
        .proPrice {   
          .px2rem(font-size,33);
          color: #e94715;
          font-weight: 700;
        }
      }
    }
  }
}
</style>


